<template>
  <Form ref="form" :model="post" :rules="rules" :label-width="80" style="width: 90%; margin: auto;">
    <FormItem label="标题：" prop="title">
      <Input type="text" v-model="post.title"></Input>
    </FormItem>
    <FormItem label="地址：" prop="url">
      <Input type="text" v-model="post.url"></Input>
    </FormItem>
    <FormItem label="分类：" prop="type">
      <Input type="text" v-model="post.type"></Input>
    </FormItem>
    <FormItem label="描述：" prop="desc">
      <Input
        v-model="post.desc"
        type="textarea"
        :autosize="{minRows: 2,maxRows: 5}"
        placeholder="文章描述"
      ></Input>
    </FormItem>
  </Form>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      post: {
        title: "",
        desc: "",
        url: "",
        type: ""
      },
      rules: {
        title: [
          {
            required: true,
            message: "标题必填"
          },
          {
            max: 32,
            message: "标题最长32位"
          }
        ],
        url: [
          {
            required: true,
            message: "描述必填"
          },
          {
            max: 32,
            message: "描述最长128位"
          }
        ]
      }
    };
  },
  methods: {
    validate() {
      return this.$refs.form.validate();
    }
  },
  watch: {
    value: {
      handler(value) {
        this.post = value;
      },
      deep: true,
      immediate: true
    },
    post: {
      handler(value) {
        this.$emit("input", value);
      },
      deep: true
    }
  }
};
</script>

<style>
</style>

